<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    "
  >
    <!-- 头部搜索 -->
    <div style="width: 50%; height: 33%">
      <div style="margin-top: 15px; display: flex">
        <el-input
          placeholder="请输入"
          v-model="inputValue"
          class="input-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择" @change="searchChange">
            <el-option label="IP" value="1"></el-option>
            <el-option label="地区" value="2"></el-option>
            <el-option label="单位" value="3"></el-option>

          </el-select>
          <el-button slot="append" class="inBtn" @click="search"
            >检索</el-button
          >
        </el-input>
        <el-button style="margin-left: 20px" class="inBtn" @click="uploadFile"
          >批量导入</el-button
        >
        <el-dialog title="批量导入" :visible.sync="dialogVisible" width="30%">
          <file-upload :uploadFileUrlIn="'/camera/info/imports'" :uploadSucessFn="uploadSucessFn" ref="uploadRef" :fileType="['xlsx', 'xls']"></file-upload>
        </el-dialog>
      </div>
    </div>
    <!-- 横线分割 -->
    <!-- 下面内容 -->
    <div style="flex: 1; width: 100%">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="列表显示" name="second">
          <ListComponent ref="listRef"></ListComponent>
        </el-tab-pane>
        <el-tab-pane label="图谱显示" name="first">
          <otherShow ref="otherRef"></otherShow>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import ListComponent from "./list.vue";
import otherShow from "./otherShow.vue";
export default {
  components: {
    ListComponent,
    otherShow,
  },
  data() {
    return {
      inputValue: "",
      select: "1",
      activeName: "second",
      dialogVisible: false,
    };
  },
  methods: {
    uploadSucessFn(res, file) {
      console.log('resresresres',res);
      console.log('filefilefilefile',file);
      this.$refs.uploadRef.closeLoading();
      this.dialogVisible = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    search() {
      console.log(this.inputValue);
      this.$refs.listRef.getListOutside(this.select, this.inputValue);
      this.$refs.otherRef.getListOutside(this.select, this.inputValue);
      
    },
    searchChange(val) {
        this.inputValue = '';
        if(val === '1'){
            this.select = '1';
        }else if(val === '2'){
            this.select = '2';
        }else{
            this.select = '3';
        }
    },
    uploadFile() {
      console.log("批量导入");
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.uploadRef.open();
      });
      this.$refs.uploadRef.getListOutside(this.select, this.inputValue);
    },
  },
};
</script>
<style scoped>
::v-deep.el-select .el-input {
  width: 130px;
}
::v-deep.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.inBtn {
  color: white !important;
  width: 106px;
  background: linear-gradient(270deg, #2dbffd 0%, #0e5fff 100%) !important;
}
</style>
